<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        text-align: center;
        margin: 0 auto;
    }
    
    .font {
        font-size: 36px;
    }
    
    div {
        width: 72px;
        height: 72px;
        border: skyblue 1px solid;
        position: relative;
        float: left;
        text-align: center;
        margin-left: 40px;
        margin-right: auto;
        margin-top: 10%;
        background-color: orange;
    }
    
    .firstdiv {
        margin-left: 37%;
    }
</style>

<body>
    <p class="font" style="margin-top: 100px;"><strong>距离光棍节，还有</strong></p>

    <div class="firstdiv" style="line-height: 72px;"></div>
    <div style="line-height: 72px;"></div>
    <div style="line-height: 72px;"></div>
    <div style="line-height: 72px;"></div>

</body>
<script>
    var divs = document.querySelectorAll("div");
    setInterval(function cDn() {
        var nowtime = +new Date(); //是new Date().getTime()的简写返回当前时间戳   单位是毫秒
        var inputtime = +new Date('2020-11-11 11:11:11'); //是设置特定的时间结束的时间戳，即从当前系统时间开始到设置的时间戳
        var res = (inputtime - nowtime) / 1000; //得到指定时间与当前时间的时间戳
        //利用三元表达式，判断是否值小于0，如果小于零加个字符‘0’并给它赋值
        var day = parseInt(res / 60 / 60 / 24);
        day = day < 10 ? '0' + day + '天' : day + '天';
        var h = parseInt(res / 60 / 60 % 24);
        h = h < 10 ? '0' + h + '时' : h + '时';
        var minute = parseInt(res / 60 % 60);
        minute = minute < 10 ? '0' + minute + '分' : minute + '分';
        var scound = parseInt(res % 60);
        scound = scound < 10 ? '0' + scound + '秒' : scound + '秒';
        divs[0].innerText = day;
        divs[1].innerText = h;
        divs[2].innerText = minute;
        divs[3].innerText = scound;
    }, 1000);
</script>

</html>